<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 空间预约确认</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen pb-24">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-4 text-white flex items-center">
            <button class="w-8 h-8 flex items-center justify-center" onclick="window.history.back()">
                <i class="fa-solid fa-arrow-left"></i>
            </button>
            <div class="ml-3 flex-1 text-lg font-medium">空间预约确认</div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-16 px-4">
        <!-- 空间信息卡片 -->
        <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-base font-medium mb-4">预约空间</h3>
                <div class="flex">
                    <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=200&auto=format&fit=crop" 
                             alt="空间图片" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h4 class="font-medium mb-1">和谐瑜伽馆（小型教室）</h4>
                        <p class="text-xs text-gray-500 mb-2">可容纳8人 | 配备专业设备</p>
                        <div class="text-primary-dark font-medium">¥200/小时</div>
                    </div>
                </div>
            </div>
            
            <!-- 选择时间 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="text-base font-medium mb-3">选择时间</h3>
                <div class="mb-4">
                    <h4 class="text-sm text-gray-500 mb-2">选择日期</h4>
                    <div class="flex space-x-2 overflow-x-auto pb-2 no-scrollbar">
                        <div class="px-4 py-2 border border-gray-200 rounded-lg text-center min-w-[70px]">
                            <div class="text-xs text-gray-500">今天</div>
                            <div class="font-medium">6月7日</div>
                        </div>
                        <div class="px-4 py-2 border border-primary-dark rounded-lg text-center min-w-[70px] bg-purple-50">
                            <div class="text-xs text-gray-500">明天</div>
                            <div class="font-medium text-primary-dark">6月8日</div>
                        </div>
                        <div class="px-4 py-2 border border-gray-200 rounded-lg text-center min-w-[70px]">
                            <div class="text-xs text-gray-500">周五</div>
                            <div class="font-medium">6月9日</div>
                        </div>
                        <div class="px-4 py-2 border border-gray-200 rounded-lg text-center min-w-[70px]">
                            <div class="text-xs text-gray-500">周六</div>
                            <div class="font-medium">6月10日</div>
                        </div>
                        <div class="px-4 py-2 border border-gray-200 rounded-lg text-center min-w-[70px]">
                            <div class="text-xs text-gray-500">周日</div>
                            <div class="font-medium">6月11日</div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-sm text-gray-500 mb-2">选择时段</h4>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="border border-gray-200 rounded-lg py-2 text-center">
                            <div class="text-sm">9:00-10:00</div>
                        </div>
                        <div class="border border-gray-200 rounded-lg py-2 text-center">
                            <div class="text-sm">10:30-11:30</div>
                        </div>
                        <div class="border border-primary-dark rounded-lg py-2 text-center bg-purple-50">
                            <div class="text-sm text-primary-dark">14:00-15:00</div>
                        </div>
                        <div class="border border-gray-200 rounded-lg py-2 text-center">
                            <div class="text-sm">15:30-16:30</div>
                        </div>
                        <div class="border border-gray-200 rounded-lg py-2 text-center">
                            <div class="text-sm">17:00-18:00</div>
                        </div>
                        <div class="border border-gray-200 rounded-lg py-2 text-center">
                            <div class="text-sm">19:00-20:00</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 备注信息 -->
            <div class="p-4">
                <h3 class="text-base font-medium mb-3">备注信息</h3>
                <textarea 
                    placeholder="请输入备注信息，如特殊要求或人数等" 
                    class="w-full border border-gray-200 rounded-lg p-3 text-sm h-24"></textarea>
            </div>
        </div>
        
        <!-- 费用明细 -->
        <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
            <div class="p-4">
                <h3 class="text-base font-medium mb-3">费用明细</h3>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm">空间费用</span>
                        <span class="text-sm">¥200</span>
                    </div>
                    
                    <div class="flex justify-between">
                        <span class="text-sm flex items-center">
                            <i class="fa-solid fa-ticket text-primary-dark mr-1"></i>
                            优惠券
                        </span>
                        <span class="text-sm text-primary-dark">-¥20</span>
                    </div>
                    
                    <div class="border-t border-gray-100 pt-3 flex justify-between">
                        <span class="font-medium">实付金额</span>
                        <span class="font-medium text-primary-dark">¥180</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 底部操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-4 z-20 max-w-md mx-auto">
        <div class="flex justify-between items-center mb-2">
            <div class="flex items-center">
                <span class="text-sm text-gray-500">实付金额：</span>
                <span class="text-lg font-bold text-primary-dark">¥180</span>
            </div>
            <div class="flex items-center">
                <i class="fa-solid fa-ticket text-primary-dark mr-1"></i>
                <span class="text-sm text-primary-dark">优惠券 1张</span>
                <i class="fa-solid fa-chevron-right text-xs text-gray-400 ml-1"></i>
            </div>
        </div>
        <button class="w-full py-3 gradient-bg rounded-full text-white text-sm font-medium" onclick="window.location.href='order_detail.html'">
            确认支付
        </button>
    </div>
</body>
</html> 